import { VxeUI } from 'vxe-pc-ui';
import { ElLink } from 'element-plus';

/**
 * 表格选择器选中的数据，vxe-grid 中的列按钮渲染器
 */
// 使用示例
// cellRender: {
//   name: 'RaTableSelectViewRender',
//   props: {
//     text: '查看详情',
//     title: '查看详情',
//     urlGetter: (row) => `/admin/user?id=${row.field_table_select}`,
//   },
// },

VxeUI.renderer.add('RaTableSelectViewRender', {
  renderDefault(renderOpts, params) {
    const { row, column } = params;
    const { props = {}, events = {} } = renderOpts;

    // 如果绑定值为空，则不显示任何数据
    const field = column.field;
    const fieldValue = row[field];
    if (fieldValue === null || fieldValue === undefined || fieldValue === '') {
      return []; // 返回空数组，VxeUI 将不会渲染任何 DOM
    }

    // 按钮文本
    const buttonText = props.text || '查看详情';

    // 动态属性
    const buttonProps = {
      type: props.type || 'primary',
      underline: 'never',
      disabled:
        typeof props.disabled === 'function'
          ? props.disabled(row)
          : props.disabled,
      ...props,
      onClick: (event) => {
        // 导入 useVxeModal
        import('@/composables/useVxeModal').then(({ useVxeModal }) => {
          const { openUrlModal } = useVxeModal();

          // 生成 URL
          const url =
            typeof props.urlGetter === 'function'
              ? props.urlGetter(row)
              : props.url || '';

          // 打开弹窗
          openUrlModal({
            title: props.title || '详情',
            url,
            onClose:
              props.onClose ||
              (() => {
                console.log('弹窗关闭');
              }),
          });

          // 触发自定义点击事件
          if (events.click) {
            events.click({ row, column, event });
          }
          if (props.onClick) {
            props.onClick({ row, column, event });
          }
        });
      },
    };

    // 处理图标
    if (
      props.icon &&
      typeof props.icon === 'string' &&
      props.icon.startsWith('svg-')
    ) {
      // SVG 图标
      const iconName = '#' + props.icon.replace('svg-', 'icon-');
      return (
        <ElLink {...buttonProps}>
          <svg class="button-svg-icon">
            <use xlinkHref={iconName} />
          </svg>
          {buttonText}
        </ElLink>
      );
    } else {
      // Element Plus 图标或无图标

      if (props.icon) {
        buttonProps.icon = props.icon;
      }
      return <ElLink {...buttonProps}>{buttonText}</ElLink>;
    }
  },
});
